Pure CSS Off-screen Navigation Menuの使い方
- 下記ページを参考に各ファイル1式を作成。
- 作成したファイルを任意の場所にコピー。
- 動作させるファイル(サンプルではindex.html)にコードを記述。
<パスは上記ファイル構成の場合なので環境にあわせて変更>
・head部分にcssファイルを読み込ませるためのコードを記述。<head> <!--作成したファイル--> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head>
サンプルのcssコード
* { margin: 0; padding: 0; } html, body { background: #fff; height: 100%; } body { overflow: hidden; } .navigation { /* critical sizing and position styles */ width: 100%; height: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; /* non-critical appearance styles */ list-style: none; background: #111; } /* Navigation Menu - List items */ .nav-item { /* non-critical appearance styles */ width: 200px; border-top: 1px solid #111; border-bottom: 1px solid #000; } .nav-item a { /* non-critical appearance styles */ display: block; padding: 1em; background: linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); color: white; font-size: 1.2em; text-decoration: none; transition: color 0.2s, background 0.5s; } .nav-item a:hover { color: #c74438; background: linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(75,20,20,0.65) 100%); } /* Site Wrapper - Everything that isn't navigation */ .site-wrap { /* Critical position and size styles */ min-height: 100%; min-width: 100%; background-color: white; /* Needs a background or else the nav will show through */ position: relative; top: 0; bottom: 100%; left: 0; z-index: 1; } /* Nav Trigger */ .nav-trigger { /* critical styles - hide the checkbox input */ position: absolute; clip: rect(0, 0, 0, 0); } label[for="nav-trigger"] { /* critical positioning styles */ position: fixed; left: 15px; top: 15px; z-index: 2; /* non-critical apperance styles */ height: 30px; width: 30px; cursor: pointer; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>"); background-size: contain; } /* Make the Magic Happen */ .nav-trigger + label, .site-wrap { transition: left 0.2s; } .nav-trigger:checked + label { left: 215px; } .nav-trigger:checked ~ .site-wrap { left: 200px; box-shadow: 0 0 5px 5px rgba(0,0,0,0.5); }
・<body></body>内にコードを記述<ul class="navigation"> <li class="nav-item"><a href="#">Home</a></li> <li class="nav-item"><a href="#">Portfolio</a></li> <li class="nav-item"><a href="#">About</a></li> <li class="nav-item"><a href="#">Blog</a></li> <li class="nav-item"><a href="#">Contact</a></li> </ul> <input type="checkbox" id="nav-trigger" class="nav-trigger" /> <label for="nav-trigger"></label> <div class="site-wrap"> <!-- insert the rest of your page markup here --> </div>
サンプルのhtmlコード
<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta charset="utf-8" /> <title>Pure CSS Off-screen Navigation Menu</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script> <![endif]--> </head> <body> <ul class="navigation"> <li class="nav-item"><a href="#">Home</a></li> <li class="nav-item"><a href="#">Portfolio</a></li> <li class="nav-item"><a href="#">About</a></li> <li class="nav-item"><a href="#">Blog</a></li> <li class="nav-item"><a href="#">Contact</a></li> </ul> <input type="checkbox" id="nav-trigger" class="nav-trigger" /> <label for="nav-trigger"></label> <div class="site-wrap"> <!-- insert the rest of your page markup here --> </div> </body> </html>
- ファイル1式をサーバーにアップロードして設置完了。